<template>
    <div class="bgf release" v-loading.fullscreen.lock="fullscreenLoading" style="z-index: 10">
        <el-form :model="form" ref="submitForm" label-width="auto" :rules="rules">
            <el-form-item label="选择城市：" prop="city">
                <el-select v-model="form.city" placeholder="请选择城市" class="w180">
                    <el-option v-for="(item,index) in cityL" :key="index" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择球种：" prop="ballSeed">
                <el-select v-model="form.ballSeed" placeholder="请选择球种" class="w180">
                    <el-option v-for="(item,index) in ballSeedL" :key="index" :label="item" :value="item" />
                </el-select>
            </el-form-item>
            <el-form-item label="新闻封面：" prop="coverImg">
                <el-upload :headers="{ token: $store.state.token }" :action="uploadUrl" :on-success="uploadImgSuccess"
                    accept="image/*" class="avatar-uploader" name="file" :show-file-list="false">
                    <img v-if="form.coverImg" :src="form.coverImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="标题：" prop="title">
                <el-input v-model="form.title" placeholder="请输入公告" class="w460" />
            </el-form-item>

            <el-form-item label="正文简介：" prop="content">
                <el-input v-model="form.content" type="textarea" placeholder="输入简介内容" :autosize="{ minRows: 6 }"
                    class="w460" />
            </el-form-item>

            <el-form-item label="简介图片：">
                <div class="flex">
                    <div v-for="(item,index) in form.img" :key="index" style="position: relative;margin-right: 20px;">
                        <img :src="item.url" class="avatar" />
                    </div>
                <el-upload :headers="{ token: $store.state.token }" :action="uploadUrl" :on-success="uploadImgSuccesss"
                    accept="image/*" class="avatar-uploader" name="file" :show-file-list="false">
                    
                    <el-icon class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                </div>
            </el-form-item>

           <el-form-item>
                <el-button @click="submit" class="w70" type="primary">确认</el-button>
                <el-button @click="$router.go(-1)" class="w70">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import areaData from '@/js/city.js'
export default {
    data() {
        return {
            fullscreenLoading: false,
            uploadUrl: this.$public.uploadUrl,
            ballSeedL:['足球','篮球','曲棍球','排球','羽毛球','乒乓球','网球','橄榄球','其他'],
            cityL: [],
            form: {img:[]},
            rules: {
                city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
                ballSeed: [{ required: true, message: '请选择球种', trigger: 'blur' }],
                coverImg: [{ required: true, message: '请上传封面', trigger: 'blur' }],
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                content: [{ required: true, message: '请输入正文简介', trigger: 'blur' }],
            },
        }
    },
    mounted() {

        let that = this;
        that.id = that.$route.params.id;
        console.log('that.$routethat.$routethat.$route',that.$route)

        this.getData()

        for (var i in areaData) {
            this.cityL = [...this.cityL, ...areaData[i].cities]
        }
        console.log('city', this.cityL)
    },
    methods: {
        getData() {
            let that = this;
            // 商品详情
            console.log(that.id, 'that.id')
            that.$api.newsdetail({ newsId: that.id }).then(res => {
                if (res) {
                    console.log(res, '商品详情77777');
                    res.img = res.img.split(',')
                    let arr = []
                    for(var i in res.img){
                        arr.push({url:res.img[i]})
                    }
                    res.img = arr
                    // res.img = [{url:res.img}]
                    that.form = res;
                }
            });
        },

        // 提交发布
        submit() {
            let that = this;
            that.$refs['submitForm'].validate((val) => {
                if (val) {
                    console.log('通过')
                    // that.fullscreenLoading = true;

                    if (that.id != 'add') {
                        ['createTime', 'liveCount', 'videoCount',].map(key => {
                            delete that.form[key]
                        })
                    }
                    console.log(that.form, 'all-----------');
                    let form = JSON.parse(JSON.stringify(that.form))
                    let img = ''
                    for(var i in form.img){
                        if(img == ''){
                            img = form.img[i].url
                        }else{img = img + ',' + form.img[i].url}
                        
                    }
                    form.img = img
                    console.log(form)
                    that.$api.updatenews(form).then(res => {
                        that.fullscreenLoading = false;
                        console.log(res);
                        if (res) {
                            that.$message.success(res.message);
                            //   that.$router.replace('/teacherSingle');
                            that.$router.go(-1)
                        }
                    });
                }
            })
        },

        // 规格图片上传成功
        uploadImgSuccess(val) {
            if (val.status == 200) {
                let img = this.utils.Decrypt(val.data);
                this.form.coverImg = img.path
            }
        },
        uploadImgSuccesss(val){
            if(val.status==200){
                let img = this.utils.Decrypt(val.data);
                this.form.img.push({url:img.path})
            }
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
    }
}
</script>
  
<style lang="scss" scoped>
:deep .el-checkbox-button {
    margin-right: 10px;
    margin-bottom: 10px;
}

:deep .el-checkbox-button__inner {
    border-left: var(--el-border);
}

.ul1 {
    border: 1px solid #dddddd;
    padding: 10px 28px 24px;
    width: 1035px;
    max-width: 100%;

    li {
        padding-top: 10px;

        p {
            padding-bottom: 5px;
        }
    }
}

:deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
}

:deep .el-input-group__prepend {
    width: 30px;
    text-align: center;
    padding: 0;
}

:deep .el-input-group__append {
    width: 38px;
    text-align: center;
    padding: 0;
}

.release {
    padding: 28px 16px;
}

.avatar {
    width: 80px;
    height: 80px;
}

.specImg {
    width: 32px;
    height: 32px;
}

.el-icon.specImg {
    width: 32px;
    height: 32px;
}

.el-icon.avatar-uploader-icon {
    width: 80px;
    height: 80px;
}

:deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
}

// :deep
.editor {
    padding-left: 35px;
    max-width: 795px;
    padding-bottom: 30px;
}
</style>